/***
*@Author：zhonglei
*@Date：2022-03-21 10:39:44
文档路径 D:\develop\vue项目\sea-ui\src\components\input.vue
 *@Description: 输入框组件
*/

<template>
    <div class="sea-input">
        <input class="sea-input__inner"
            :class="{'is-disabled' : disabled}"
            :placeholder="placeholder"
            :type="showPassword ? (passwordVisible ? 'text' : 'password') : type"
            :name="name"
            :value="value"
            @input="handleInput"
        >
        <span class="sea-input__suffix" v-if="showSuffix">
            <i class="sea-input__icon sea-icon-close"
            v-if="clearable && value"
            @click.self="clear"
            ></i>
            <i class="sea-input__icon sea-icon-yanjing"
            v-if="showPassword"
            @click.self="handlePassword"
            :class="{'sea-icon-view-active': passwordVisible}"
            ></i>
        </span>
    </div>
</template>
<script>
export default {
  name: 'seaInput',
  props: {
    disabled: {
      type: Boolean,
      default: false
    },
    placeholder: {
      type: String,
      default: '请输入内容'
    },
    type: {
      type: String,
      default: 'text'
    },
    name: {
      type: String,
      default: ''
    },
    value: {
      type: String,
      default: ''
    },
    clearable: {
      type: Boolean,
      default: false
    },
    showPassword: {
      type: Boolean,
      default: false
    }
  },
  data () {
    return {
      passwordVisible: false
    }
  },
  computed: {
    showSuffix () {
      return this.clearable || this.showPassword
    }
  },
  methods: {
    handleInput (e) {
      this.$emit('update:value', e.target.value)
    },
    clear () {
      console.log('调用了2')
      this.$emit('update:value', '')
    },
    handlePassword () {
      console.log('调用了')
      this.passwordVisible = !this.passwordVisible
    }
  }

}
</script>
<style lang="scss" scoped>
.sea-input{
    width:100%;
    position:relative;
    font-size:14px;
    display:inline-block;
    .sea-input__inner{
        -webkit-appearance: none;
        background-color:#fff;
        background-image:none;
        border-radius:4px;
        border:1px solid #dcdfe6;
        box-sizing:border-box;
        color:#606266;
        display:inline-block;
        font-size:inherit;
        height:40px;
        line-height:40px;
        outline:none;
        padding:0 15px;
        transition:border-color .2s cubic-bezier(.645,.045,.355,1);
        width:100%;
        &:focus {
            outline:none;
            border-color:#409eff;
        }
        &.is-disabled {
            background-color:#f5f7fa;
            border-color:#e4e7ed;
            color:#c0c4cc;
            cursor:not-allowed;
        }
    }
}
    .sea-input__suffix{
        position:absolute;
        height:100%;
        right:10px;
        top:0;
        line-height:40px;
        text-align: center;
        color:#c0c4cc;
        transition:all .3s;
        z-index:900;
        i{
            color:#c0c4cc;
            font-size:14px;
            cursor:pointer;
            transition:color .2s cubic-bezier(.645,.045,.035,1);

        }
        .sea-icon-view-active{
            color:blue;
        }
    }
</style>
